<nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name">
                <h1><a href="/">Crazy for code</a></h1>
            </li>
            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>
        <section class="top-bar-section">
            <!-- Right Nav Section -->
            <ul class="right">
                <li class="active"><a href="https://github.com/keelii/crazy4code">Fork me on github</a></li>
                <!-- <li class="has-dropdown">
                    <a href="#">Right Button Dropdown</a>
                    <ul class="dropdown">
                        <li><a href="#">First link in dropdown</a></li>
                    </ul>
                </li> -->
            </ul>
            <!-- Left Nav Section -->
            <ul class="left">
                <li><a id="nav-formatter" href="/formatter">Formatter</a></li>
                <li><a id="nav-regexp" href="/regexp">Regexp</a></li>
                <li><a id="nav-character" href="/character">Character</a></li>
                <li><a id="nav-thanks" href="/thanks">Thanks</a></li>
            </ul>
            <script>
                (function(doc) {
                    var nav;
                    if ( cfg.nav ) {
                        nav = doc.getElementById('nav-' + cfg.nav);
                        if ( nav ) {
                            nav.className += 'current';
                        }
                    };
                })(document);
            </script>
        </section>
    </nav>